<template>
  <div class="index">
    <!-- 头部 -->
    <div class="top">
      <div class="top_title">鲜花礼品</div>
    </div>
    <!-- lunbo -->
    <div class="lunbo">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(item,index) in lunbo" :key="index">
          <img :src="item.img" alt="" />
        </swiper-slide>
      </swiper>
    </div>
    <!-- 种类 -->
    <div class="species">
      <div class="species_flowr">
        <ul>
          <li v-for="(item1,index1) in zhonglei1" :key="index1">
            <router-link to="/Jonathan" @click.native="chuan_can(index1)">
              <img :src="item1[0].img" alt="" />
              <span>{{item1[0].title}}</span>
            </router-link>
          </li>
        </ul>
        <ul>
          <li v-for="(item2,index2) in zhonglei2" :key="index2">
            <router-link to="/Jonathan" @click.native="chuan_can1(index2)">
              <img :src="item2[0].img" alt="" />
              <span>{{item2[0].title}}</span>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <!-- indexlmqxth -->
    <div class="lmqx">
      <div class="lmqx_th">
        <div class="lmqx_title">
          <p>● 浪漫七夕特惠 ●</p>
          <p>PREFERENTIAL</p>
        </div>
      </div>
    </div>
    <!-- lmqxth商品 -->
    <div class="thsp">
      <div v-for="(item,index) in lm_qx" :key="index">
        <img :src="item.img" alt="" />
      </div>
      <div>
        <img v-for="(item,index) in lm_qx1" :key="index" :src="item.img" alt="" />
      </div>
    </div>
    <!-- 优惠券 -->
    <div class="yhj">
      <div class="yhj_title">
        <div :class="item.leim" v-for="(item,index) in youhui" :key="index">
          <span class="title_price">
            {{item.title}} <br />
            {{item.title1}}
          </span>
          <span class="title_manjian">{{item.title2}}</span>
          <span class="title_lj">
            <router-link to="">{{item.title3}}</router-link>
          </span>
        </div>
        
      </div>
    </div>
    <!-- indexrqtj -->
    <div class="lmqx">
      <div class="lmqx_th">
        <div class="lmqx_title">
          <p>● 人气推荐 ●</p>
          <p>BEST POPULAR</p>
        </div>
      </div>
    </div>
    <div class="rqtj_img">
      <ul>
        <li v-for="(item,index) in rqtj" :key="index">
          <router-link to="/Gdetails" @click.native="tiaoXq(index)">
            <img :src="item[0].img" alt=""/>
          </router-link>
        </li>
      </ul>
    </div>
    <!-- sousuo -->
    <div class="lmqx">
      <div class="lmqx_th">
        <div class="lmqx_title">
          <p>● 奢宠礼盒 ●</p>
          <p>PAMPER LUXURY</p>
        </div>
      </div>
    </div>
    <div class="sc_lh">
      <ul class="lh_sp">
        <li v-for="(item,index) in sclh" :key="index">
          <router-link to="/Gdetails" @click.native="sc_xq(index)">
            <div class="lh_img">
              <img :src="item.img" alt="" />
            </div>
            <div class="lh_title">
              <p>{{item.title}}</p>
              <div class="lh_tprice">
                <del>￥{{item.title1}}</del>
                <ins>￥{{item.title2}}</ins>
                <span class="iconfont icon-gouwuchecopy"></span>
              </div>
            </div>
          </router-link>
        </li>
      </ul>
    </div>

    <div class="denglu_anniu" v-if="login==null">
      <span>登录查看更多</span>
      <router-link to="/Login">
        立即登录
      </router-link>
    </div>

    <div class="fhDb" @click="dinBu()">
      Top
    </div>

  </div>
</template>
<script>

$(function(){

        $('.fhDb').hide();        //隐藏go to top按钮

        $(window).scroll(function(){
            
            if($(this).scrollTop() > 50){
                $('.fhDb').fadeIn();
            }else{
                $('.fhDb').fadeOut();
            }
        });
    });

import bus from '@/bus.js';

export default {
  data() {
    return {
      login:null,
      xq_xinx:'',
      every:'',
      swiperOptions: {
        autoplay: true,
        loop: true, //循环播放
      },
      lm_qx:[],
      lm_qx1:[],
      lunbo:[],
      zhonglei1:{},
      zhonglei2:{},
      youhui:[],
      rqtj:{},
      sclh:[]
}
  },
  methods:{
    tiaoXq(xx){
      this.xq_xinx=this.rqtj[xx][0].list[0]
      localStorage.setItem('xqXx',JSON.stringify(this.xq_xinx));
    },
    sc_xq(xixi){
      this.xq_xinx=this.sclh[xixi]
      localStorage.setItem('xqXx',JSON.stringify(this.xq_xinx));
    },
    chuan_can(xinxi){
      this.every=this.zhonglei1[xinxi][0].list;
      localStorage.setItem('every',JSON.stringify(this.every));
    },
    chuan_can1(xinxi){
      this.every=this.zhonglei2[xinxi][0].list;
      localStorage.setItem('every',JSON.stringify(this.every));
    },
    dinBu(){
      $('html ,body').animate({scrollTop: 0}, 500);
      return false;
    }
  },
  mounted(){
    // http://47.114.130.21:3000/index
    this.$axios.get('http://47.114.130.21:3000/index').then((data)=>{
      this.lm_qx=JSON.parse(data.data[0].lm_qx)
      this.lm_qx1=JSON.parse(data.data[0].lm_qx1)
      this.lunbo=JSON.parse(data.data[0].lunbo)
      this.zhonglei1=JSON.parse(data.data[0].zhonglei1)
      this.zhonglei2=JSON.parse(data.data[0].zhonglei2)
      this.youhui=JSON.parse(data.data[0].youhui)
      this.rqtj=JSON.parse(data.data[0].rqtj)
      this.sclh=JSON.parse(data.data[0].sclh)
    })
    this.login=localStorage.getItem('id');
  }
 
};
</script>

<style lang="less" scope>
.index {
  // height: 55.173333rem;
  margin-bottom: 50px;
  background: #f4f4f4;
  .fhDb{
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    border-radius: 5px;
    text-align: center;
    width: 0.8rem;
    height: 0.8rem;
    position: fixed;
    bottom: 2.666667rem;
    right: 0.266667rem;
    z-index: 9999;
    font-size: 12px;
    line-height: 0.8rem;
  }
  .lunbo{
    margin-top: 45px;
  }
  .swiper-container {
    width: 100%;
    height: 4.8rem;
    .swiper-wrapper {
      width: 100%;
      .swiper-slide {
        width: 100%;
        > img {
          height: 100%;
          width: 100%;
        }
      }
    }
  }
  
  .species {
    display: block;
    width: auto;
    height: 4.3rem;
    max-width: 100%;
    border-color: #222222;
    border-width: 0;
    .species_flowr {
      display: flex;
      height: 100%;
      box-shadow: 0 0 0.106667rem #e5e5e5;
      padding: 0.053333rem;
      margin: 0.053333rem;
      background-color: #ffffff;
      margin-top: 0.266667rem;
      flex-flow: column;
      justify-content: space-around;
      ul {
        display: flex;
        flex-flow: row;
        flex: 1;
        width: 100%;
        margin: 0.133333rem 0px;
        li {
          display: flex;
          flex-flow: row;
          flex: 1;
          width: 100%;
          a {
            width: 100%;
            display: flex;
            flex: 1;
            flex-flow: column;
            justify-content: space-around;
            align-items: center;
            img {
              width: 1.066667rem;
              margin: 0.133333rem 0px;
            }
            span {
              font-size: 13px;
              color: #353535;
            }
          }
        }
      }
    }
  }
  .lmqx {
    display: block;
    width: auto;
    max-width: 100%;
    border-color: #222222;
    border-width: 0;
    .lmqx_th {
      background-color: #ffffff;
      margin-top: 0.266667rem;
      padding-top: 0.533333rem;
      .lmqx_title {
        > p {
          text-align: center;
        }
        > :first-child {
          font-size: 18px;
          font-weight: normal;
          font-style: normal;
          color: #dd3333;
        }
        > :last-child {
          font-size: 14px;
          font-weight: normal;
          font-style: normal;
          font-family: 默认;
          color: #a9a9a9;
        }
      }
    }
  }
  .thsp {
    width: 100%;
    padding: 0.133333rem 0.133333rem;
    background: #ffffff;
    display: flex;
    flex: 1;
    flex-flow: row;
    justify-content: space-around;
    div {
      margin: 0.133333rem 0.133333rem;
      img {
        border-radius: 8px;
      }
    }
    > :first-child {
      width: 60%;
      img {
        width: 100%;
      }
    }
    > :last-child {
      width: 34%;
      display: flex;
      flex-flow: column;
      img {
        width: 100%;
        margin-bottom: 0.133333rem;
      }
    }
  }
  .yhj {
    width: 100%;
    .yhj_title {
      background: #ffffff;
      padding-top: 0.266667rem;
      padding-bottom: 0.533333rem;
      display: flex;
      flex: 1;
      flex-flow: row;
      justify-content: space-around;
      > div {
        text-align: center;
        display: flex;
        flex: 1;
        flex-flow: column;
        .title_price {
          white-space: pre-wrap;
          font-size: 16px;
        }
        .title_manjian {
          font-size: 13px;
          margin-bottom: 0.32rem;
        }
        .title_lj {
          a {
            color: #ffffff;
            padding: 0.186667rem 0.48rem;
          }
        }
      }
      .title_red {
        color: #c20430;
        a {
          background-color: #c20430;
        }
      }
      .title_black {
        color: #353535;
        a {
          background-color: #353535;
        }
      }
    }
  }
  .rqtj_img {
    ul {
      li {
        a {
          display: block;
          width: 100%;
          height: 100%;
          img {
            display: block;
            width: 100%;
          }
        }
      }
    }
  }
  .sc_lh {
    background: #ffffff;
    padding: 0.266667rem 0.266667rem;
    width: 100%;
    .lh_sp {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      li {
        width: 48%;
        margin-bottom: 0.133333rem;
        a {
          display: block;
          .lh_img {
            padding: 0.186667rem;
            img {
              width: 100%;
            }
          }
          .lh_title {
            > p {
              font-size: 13px;
              padding-right: 0.4rem;
              color: #353535;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              margin-bottom: 0.133333rem;
            }
            .lh_tprice {
              font-size: 13px;
              del {
                color: #a9a9a9;
              }
              ins {
                color: #de0a2b;
                text-decoration: none;
              }
              span{
                font-size: 12px;
                float: right;
                color: #de0a2b;
              }
            }
          }
        }
      }
    }
  }

  .denglu_anniu{
    padding: 0px 0.533333rem;
    display: flex;
    z-index: 999;
    position: fixed;
    bottom: 50px;
    width: 100%;
    height: 1.066667rem;
    background: rgba(0, 0,0, 0.5);
    justify-content: space-between;
    align-items: center;
    >span{
      color: #ffffff;
    }
    >a{
      display: block;
      height:0.666667rem;
      background: #FF734C;
      line-height: 0.666667rem;
      color: #ffffff;
      text-align: center;
      width: 2.133333rem;
      border-radius: 30px;
    }
  }

}
</style>
